<template>
	<div
		class="content"
		style="
			display: flex;
			color: #1d66a9;
			height: 100%;
			justify-content: space-between;
			margin: auto;
		">
		<div class="con-c" style="flex: 1; display: flex; flex-direction: column">
			<!-- <div style="flex: 1" @click="goToDataDetail">
				<el-image style="height: 500px" :src="con1" fit="fit" />
			</div> -->
			<div class="content" style="display: flex">
				<div>
					<CardBox title="发动机">
						<CardData type="进口压力" data="10"></CardData>
						<CardData type="出口压力" data="10"></CardData>
						<CardData type="流量" data="10"></CardData>
					</CardBox>
				</div>
				<div>
					<CardBox>
						<CardData type="进口压力" data="10"></CardData>
						<CardData type="出口压力" data="10"></CardData>
						<CardData type="泵体温度" data="10"></CardData>
						<CardData type="轴承温度" data="10"></CardData>
					</CardBox>
					<CardBox style="margin: 10px 0">
						<CardData type="过舱轴(转速)" data="10"></CardData>
					</CardBox>
					<CardBox style="margin: 10px 0">
						<CardData type="齿轮箱(淡水)" data="10"></CardData>
						<CardData type="齿轮箱(润水)" data="10"></CardData>
					</CardBox>
					<EngineList :data-list="engieDate[0]"></EngineList>
				</div>
				<div>
					<CardBox>
						<CardData type="进口压力" data="10"></CardData>
						<CardData type="出口压力" data="10"></CardData>
						<CardData type="泵体温度" data="10"></CardData>
						<CardData type="轴承温度" data="10"></CardData>
					</CardBox>
					<CardBox>
						<CardData type="过舱轴(转速)" data="10"></CardData>
					</CardBox>
					<CardBox>
						<CardData type="电机" data="10"></CardData>
					</CardBox>
				</div>
				<div>
					<CardBox>
						<CardData type="进口压力" data="10"></CardData>
						<CardData type="出口压力" data="10"></CardData>
						<CardData type="泵体温度" data="10"></CardData>
						<CardData type="轴承温度" data="10"></CardData>
					</CardBox>
					<CardBox>
						<CardData type="过舱轴(转速)" data="10"></CardData>
					</CardBox>
					<CardBox>
						<CardData type="齿轮箱(淡水)" data="10"></CardData>
						<CardData type="齿轮箱(润水)" data="10"></CardData>
					</CardBox>
					<CardBox>
						<CardData type="柴油机(转速)" data="10"></CardData>
						<CardData type="柴油机(淡水)" data="10"></CardData>
						<CardData type="柴油机(润油)" data="10"></CardData>
					</CardBox>
				</div>
				<div>
					<div style="display: flex">
						<div>
							<CardBox>
								<CardData type="柴油机(转速)" data="10"></CardData>
							</CardBox>
							<CardBox>
								<CardData type="过舱轴(转速)" data="10"></CardData>
							</CardBox>
						</div>
						<div>
							<CardBox>
								<CardData type="柴油机(淡水)" data="10"></CardData>
							</CardBox>
							<CardBox>
								<CardData type="过舱轴(转速)" data="10"></CardData>
							</CardBox>
						</div>
					</div>
					<div style="display: flex; flex-direction: column; align-items: center">
						<CardBox>
							<CardData type="运行时间" data="10"></CardData>
							<CardData type="进口压力" data="10"></CardData>
							<CardData type="进口压力" data="10"></CardData>
						</CardBox>
						<CardBox>
							<CardData type="运行时间" data="10"></CardData>
							<CardData type="进口压力" data="10"></CardData>
							<CardData type="进口压力" data="10"></CardData>
						</CardBox>
						<CardBox>
							<CardData type="运行时间" data="10"></CardData>
							<CardData type="进口压力" data="10"></CardData>
							<CardData type="进口压力" data="10"></CardData>
						</CardBox>
					</div>
				</div>
				<div>
					<CardBox>
						<CardData type="进口压力" data="10"></CardData>
						<CardData type="出口压力" data="10"></CardData>
						<CardData type="泵体温度" data="10"></CardData>
						<CardData type="轴承温度" data="10"></CardData>
					</CardBox>
					<CardBox>
						<CardData type="过舱轴(转速)" data="10"></CardData>
					</CardBox>
					<CardBox style="margin: 10px 0">
						<CardData type="齿轮箱(淡水)" data="10"></CardData>
						<CardData type="齿轮箱(润水)" data="10"></CardData>
					</CardBox>
					<EngineList :data-list="engieDate[1]"></EngineList>
				</div>
			</div>
			<div style="display: flex; justify-content: space-around">
				<CardBox>
					<CardData type="柴油机(转速)" data="10"></CardData>
					<CardData type="进口压力" data="10"></CardData>
					<CardData type="出口压力" data="10"></CardData>
				</CardBox>
				<CardBox>
					<CardData type="柴油机(转速)" data="10"></CardData>
					<CardData type="进口压力" data="10"></CardData>
					<CardData type="出口压力" data="10"></CardData>
				</CardBox>
				<CardBox>
					<CardData type="柴油机(转速)" data="10"></CardData>
					<CardData type="进口压力" data="10"></CardData>
					<CardData type="出口压力" data="10"></CardData>
				</CardBox>
			</div>
			<div style="display: flex">
				<div style="padding: 20px">
					<el-image style="height: 100px; width: 100px" :src="vv" fit="fit" />
				</div>
				<div style="padding: 20px">
					<el-image style="height: 100px; width: 100px" :src="vv" fit="fit" />
				</div>
				<div style="padding: 20px">
					<el-image style="height: 100px; width: 100px" :src="vv" fit="fit" />
				</div>
				<div style="padding: 20px">
					<el-image style="height: 100px; width: 100px" :src="vv" fit="fit" />
				</div>
				<div style="padding: 20px">
					<el-image style="height: 100px; width: 100px" :src="vv" fit="fit" />
				</div>
			</div>
		</div>
		<div class="con-r" style="width: 200px; display: flex">报警栏</div>
	</div>
</template>

<script setup>
import { defineProps, onMounted, ref, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// import con1 from '@/assets/image/con1.png'
import vv from '@/assets/image/vv.png'
// 组件
import EngineList from './component/models/EngineList.vue'
import CardData from './component/layout/CardData.vue'
import CardBox from './component/layout/CardBox.vue'
// 工具
import { getRandomInRange } from '@/utils/utils.js'
import { getEngieDate, engieDate } from '@/mixins/globalParam.js'
let { path } = useRoute()
let router = useRouter()
// 路由
let timer = ref(null)

let goToDataDetail = () => {
	router.push({
		path: '/detail'
	})
}
onMounted(() => {
	getEngieDate(timer)
})
onUnmounted(() => {
	clearInterval(timer.value)
})
</script>

<style lang="scss" scoped>
.content {
	font-size: 32px;
	text-align: center;
	// line-height: 10rem;
	.con-c {
		background: url("../../assets/image/con1header.png") no-repeat;
		.content {
			& > div {
				margin-right: 5px;
			}
		}
	}
}
</style>
